<template>
  <el-container>
    <el-aside style="position: fixed;width: 200px;left: 0;top: 0;"><LeftMenu /></el-aside>
    <el-container style="padding-left: 200px">
      <el-header style="position: fixed;top: 0;width: calc(100% - 200px);background-color: #FFFFFF;z-index: 10"><Header /></el-header>
      <el-main style="padding-top: 61px">
        <el-container>
          <!-- 路由标签导航栏 -->
          <el-header style="height: 42px;border-bottom: 1px solid #dcdfe6;position: fixed;width: calc(100% - 200px);background-color: #FFFFFF;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);z-index: 10">
            <div class="head_tag" style="margin-left: 5px">
              <el-tag
                  v-for="(tag, index) in tags"
                  :key="index"
                  :closable="tag.path !== '/adminMain/adminHomePage'"
                  class="mx-1"
                  size="large"
                  :disable-transitions="false"
                  @close="handleClose(tag)"
                  :effect="tag.path === route.path ? 'light' : 'plain'"
                  type="danger"
              >
                <router-link :to="tag.path" style="color: rgb(245,108,108)">{{ tag.name }}</router-link>
              </el-tag>
            </div>
          </el-header>
          <el-main style="margin: 65px 25px 0 25px;"><router-view /></el-main>
        </el-container>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import Header from './Header.vue';
import LeftMenu from './LeftMenu.vue';
import { useRoute,useRouter } from "vue-router";
import { reactive, watchEffect} from "vue";

const route = useRoute();
const router = useRouter();
// 定义了一个名为tags的响应式数据对象
// 默认首页加入tag标签组，后面加入判断条件将首页不可删除
const tags = reactive([
  { name: '首页', path: '/adminMain/adminHomePage' }
])
// 使用 watchEffect 函数来监听当前路由的变化，并根据当前路由自动添加新标签
watchEffect(() => {
  // 如果当前路径不是 '/' 并且该路径没有对应的标签，则新增一个标签
  if (route.path !== '/adminMain/adminHomePage' && !tags.some((tag) => tag.path === route.path)) {
    const tag = { name: route.meta.title as string, path: route.path };
    console.log(tag.name,tag.path);
    tags.push(tag);
  }
});
// 处理关闭标签事件
const handleClose = (tag: any) => {
  const index = tags.findIndex((t) => t.path === tag.path);
  if (index !== -1) {
    router.push(tags[index - 1].path);
    setTimeout(() => {
      tags.splice(index, 1);
    }, 0)
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.el-header {
  --el-header-padding: 0 !important;
}
.el-main {
  --el-main-padding: 0;
}
.mx-1 {
  margin-top: 4.5px;
  margin-right: 5px;
}
a {
  text-decoration: none;
}
:root {
  background-color: rgba(235, 238, 239, 0.5);
}
</style>
